<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>文字图片垂直居中</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                background-color: #ccc;
                margin-bottom: 20px;
            }
            .img{
                width: 200px;
                height: 200px;
                display: inline-block;
                background: url(http://00.imgmini.eastday.com/mobile/20180103/20180103215054_cce882f6e93a898343bbfe6721459765_6_mwpm_03200403.jpg) center center no-repeat;
            }
            .img1{
                vertical-align: middle;
            }
            .vm{
                vertical-align: middle;
            }
            .dib{
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="img"></div>
            <span class="vm">文字设置垂直居中垂直居中</span>
        </div>
        <div class="box">
            <div class="img img1"></div>
            <span>图片设置垂直居中</span>
        </div>
        <div class="box">
            <div class="img img1"></div>
            <span class="vm">图片文字都设置垂直居中</span>
        </div>
        <div class="box">
            <div class="img img1"></div>
            <span class="dib vm">图片文字(文字display:inline-block)都设置垂直居中</span>
        </div>
        <h2>结论</h2>
        <ol>
            <li>只有文字设置垂直居中，不能垂直居中</li>
            <li>只有图片设置垂直居中，可以垂直居中</li>
            <li>文字图片都设置垂直居中，才是真正的垂直居中</li>
            <li>文字设置display:inline-block对垂直居中没有影响</li>
        </ol>
    </body>
</html>